<template>
  <div class="view">
    <div class="row">
      <tinymce v-model="content" :height="500" />
    </div>

    <div>
      <el-button @click="submit" type="primary">提交</el-button>
    </div>

    <el-dialog title="内容" :visible.sync="dialogVisible" width="800">
      <tiny-content ref="tinyContent" style="height: 400px"></tiny-content>
    </el-dialog>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce';
import TinyContent from '@/components/Tinymce/content';

export default {
  name: 'ComponentsDemo',
  components: {
    Tinymce,
    TinyContent,
  },
  data() {
    return {
      dialogVisible: false,
      content:
        '<p style="text-align: center;"><img title="TinyMCE Logo" src="https://www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /></p>\n' +
        '<h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>\n' +
        '<h2>Got questions or need help?</h2>\n' +
        '<ul>\n' +
        '<li>Our <a href="../../">documentation</a> is a great resource for learning how to configure TinyMCE.</li>\n' +
        '<li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>\n' +
        '<li>We also offer enterprise grade support as part of <a href="../../../pricing">TinyMCE premium plans</a>.</li>\n' +
        '</ul>\n' +
        '<h2>A simple table to play with</h2>\n' +
        '<table style="width: 100%;" border="1">\n' +
        '<thead>\n' +
        '<tr>\n' +
        '<th>Product</th>\n' +
        '<th>Cost</th>\n' +
        '<th>Really?</th>\n' +
        '</tr>\n' +
        '</thead>\n' +
        '<tbody>\n' +
        '<tr>\n' +
        '<td>TinyMCE</td>\n' +
        '<td>Free</td>\n' +
        '<td>YES!</td>\n' +
        '</tr>\n' +
        '<tr>\n' +
        '<td>Plupload</td>\n' +
        '<td>Free</td>\n' +
        '<td>YES!</td>\n' +
        '</tr>\n' +
        '</tbody>\n' +
        '</table>\n' +
        '<pre class="language-javascript"><code>let fn = function(){}</code></pre>',
    };
  },
  methods: {
    submit() {
      this.dialogVisible = true;
      setTimeout(() => {
        this.$refs.tinyContent.setContent(this.content);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.row {
  padding: 10px;
  margin-bottom: 10px;
  line-height: 36px;
}
</style>
